<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云顶书院图书管理</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./font_3180873_4kd3dhxwa7/iconfont.css">

    <!-- <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> -->
</head>
<body>
    <!-- 侧边导航栏 -->
    <div class="snav">
        <div class="close"></div>
        <div class="little-nav" id="little_nav" style="display: none;">
            <img src="./img/logo-yd.png" style="margin-left: 21px;margin-top: 21px;" onclick="shownav()"></div>
            <!-- 套什么标签？居中 -->
            <!-- <i class="iconfont" style="zoom: 2.5; opacity: 0.7; ">&#xe8ce;</i> -->
        <!-- click oh nav -->
        <div class="snav-menu" ></div>
            <ul style="display: none;">
                <li>读在云顶</li>
                <div class="sub">
                    <li>图书现状</li>
                    <li>使用指南</li>
                    <li>主题色</li>
                </div>
                <li>联系我们</li>
                <!-- 写个反馈问题的框 -->
            </ul>
    </div>

    <!-- 头部导航栏 -->
    <div class="header" id="header">
        <div class="header-head">
            <div class="header-head-font"><a href="https://yundingshuyuan.com/home">云顶书院官网</a></div>
            <div class="header-head-font"><a href="https://www.yunliyunwai.cn/">云里云外开源社区</a></div>
        </div>
        <div class="header-nav">
            <div class="logo">
                <a href="index.html"><img src="./img/logo.png" alt="主页"></a>
            </div>
            <div class="num">123/388</div>
            <!-- alt -->
            <div class="list">
                <li class="li"><a href="./index.html">首页</a></li>
                <li class="li" style="cursor: pointer;">借阅</li>
                <li class="li" onclick="login()" style="cursor: pointer;">登陆</li>
                <li class="li" onclick="register()" style="cursor: pointer;">注册</li>
                <li class="li" onclick="user()" style="cursor: pointer;">我的图书馆</li>
                <!-- 之后再显示这个功能啦 -->
            </div>
        </div>
    </div>
    <!-- 主页面 -->
    <div class="main">
        <div class="banner">
            <div class="left-arr" onclick="back()"><</div>
            <ul class="banner-imgs">
                <li class="banner-img"></li>
                <li class="banner-img"></li>
                <li class="banner-img"></li>
            </ul>
            <div class="right-arr" onclick="add()">></div>
            <div class="banner-indexs">
                <div class="banner-index"></div>
                <div class="banner-index"></div>
                <div class="banner-index"></div>
            </div>
        </div>

        <div class="search">
            <div class="container">
                <div class="search-box">
                    <div class="big-title" style="text-align: center; color:#4072b8; margin-top: 20px;">检索</div>
                    <!-- 把三个功能块放进一个大盒子 -->
                    <div class="search-input">
                        <!-- 下拉条选择 -->
                        <div class="search-cate">
                            <label for="category">检索分类</label>
                            <select id="category" class="category" >
                                <option value="name_search">书名</option>
                                <option value="writer_search">作者</option>
                            </select>
                        </div>
                        <input type="text" class="search-bar" id="search" placeholder="在这里输入">
                        <button class="search-btn" onclick="search()">
                            检索
                            <!-- <img src="./img/search-bar放大镜.png" style="zoom: 20%;"> -->
                        </button>
                    </div>
                </div>
                <!-- <div>项目招新</div> -->
            </div>
        </div>

        <div class="content">
            <div class="container">
                <div class="review">
                    <div class="big-title" style="text-align: center; color:#4072b8; margin-top: 20px;">书评</div>
                    <div class="review-main">
                        <div class="review-box"></div>
                        <div class="review-box"></div>
                        <div class="review-box"></div>
                    </div>
                    <div class="review-main">
                        <div class="review-box"></div>
                        <div class="review-box"></div>
                        <div class="review-box"></div>
                    </div>
                    
                </div>
                <div class="num-yun">
                    <div class="big-title" style="text-align: center; color:#4072b8; padding: 20px;">数字云顶</div>
                    <div class="num-item">
                        <div>
                            <div>藏书</div>
                            <div id="book" class="num-yd"></div>
                        </div>
                        <div>
                            <div>学员</div>
                            <div id="member" class="num-yd"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <div class="container">
                <div>
                    <div>联系我们</div>
                </div>
                <div>
                    <div>反馈问题</div>
                </div>
            </div>
        </div>
    </div>
    
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/index.js"></script>
</html>